<template>
    <div class="header" :class="{[mtClass]:true,'fixed':fixed}">
        <div class="inner">
            <div class="left">
                <div v-show="leftName!='no'">
                    <i v-if="leftName=='off'" class="icon iconfont icon-guanbi" @click="leftEvent"></i>
                    <i class="mintui mintui-back" v-else @click="toLeftHref"></i>
                </div>
            </div>
            <div class="title" @click="refresh">
                <span>{{title}}</span>
                <img class="refresh_btn" src="../../assets/titlebar_refresh_small.png" :class="{'rotate':flag}" v-show="title=='视频'"/>
            </div>
            <div class="right" @click="toRightHref">
                <span v-show="rightName">{{rightName}}</span>
                <i v-show="rightIcon" class="icon iconfont" :class="[rightIcon]"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data(){
        return {
            flag:false
        }
    },
    props:{
        fixed:{
            type:Boolean,
            default:true
        },
        mtClass:{
            type:String,
            default:''
        },
        title:{
            type:String
        },
        rightName:{
            type:String,
            default:''
        },
        rightIcon:{
            type:String,
            default:''
        },
        rightPath:{
            type:String
        },
        rightPathQuery:{
            type:Object,
            default: function () {
                return {}
            }
        },
        leftName:{
            type:String,
            default:'back'
        },
        leftPath:{
            type:String
        }
    },
    methods:{
        refresh(){
            if(this.title=='视频'){
                this.$emit('refreshVideo');
                this.flag = true
                setTimeout(()=>{
                    this.flag = false
                },800)
            }
        },
        toLeftHref(){
            if(this.leftPath){
                this.$router.push(this.leftPath);
            }else{
                this.$router.back(-1);
            }
        },
        toRightHref(){
            if(this.rightIcon == 'icon-tubiao212'){
                //分享
                this.$emit('rightEvent');
                return false;
            }

            if(this.rightPath){
                if(this.rightPathQuery){
                    this.$router.push({
                        path : this.rightPath,
                        query: this.rightPathQuery
                    })
                }else{
                    this.$router.push(this.rightPath)
                }
            }else{
                if(this.rightName == '注册'){
                    this.$emit('rightEvent',2);
                }else if(this.rightName == '登录'){
                    this.$emit('rightEvent',1);
                }else{
                    this.$router.back(-1);
                }
            }
        },
        leftEvent(){
            this.$emit('leftEvent',false);
        }
    }
}
</script>


<style lang="stylus" scoped>
.header{
    height:50px;
    color: #fff;
    font-size: 14px;
    background:#fff;
    position:relative;
    .inner{
        position: absolute;
        width:100%;
        padding: 0 15px;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        display: flex;
        .left{
            text-align: left;
            flex: .5;
            position:relative;
            .mintui-back{
                font-size:20px;
                position: absolute;
                top:50%;
                left:0;
                transform:translateY(-50%);
            }
        }
        .title{
            flex: 1;
            font-size:18px;
            text-align:center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .refresh_btn{
                width: 13px;
                height: 13px;
                display: inline-block;
                &.rotate{
                    animation:change 0.7s linear;
                }
            }
        }
        .right{
            flex: .5;
            text-align: right;
            position:relative;
            span{
                position: absolute;
                top:50%;
                right:0;
                transform:translateY(-50%);
            }
            .icon{
                font-size:20px;
                position: absolute;
                top:50%;
                right:0;
                transform:translateY(-50%);
            }
        }
    }
    &.fixed{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        background:transparent;
    }
    &.no-bg{
        color: #333;
        background: #fff;
        border-bottom: 1px solid #f4f5fa;
    }
    &.no-bg-fff{
        .left{
            .mintui-back{
                color:#fff;
            }
        }
        .right{
            .icon{
                color:#fff;
            }
        }
    }
}
@keyframes change{
　　0%{-webkit-transform:rotate(0deg);}
　　50%{-webkit-transform:rotate(180deg);}
　　100%{-webkit-transform:rotate(360deg);}
}
</style>
